<!-- 巡检计划点位-标准 -->
<template>
	<el-drawer class="stardand-drawer" v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="false">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">标准</div>
			</div>
		</template>

		<template #default>
			<div class="zs-layout-flex-col zs-drawer-container">
				<div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-01">
					<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
					<div class="zs-title">配置标准</div>
				</div>
				<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
					<span>
						<el-input v-model="queryParams.pointName" class="zs-select-md zs-space-right-sm" placeholder="点位名称" clearable @blur="queryList" />
						<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
					</span>
				</div>
				<!-- teble -->
				<div class="zs-card">
					<el-table ref="tableRef" :key="currentRow.id" height="450px" class="zs-table-page-main" row-key="pointId" :data="tableData.data" v-loading="tableData.loading" stripe @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" reserve-selection />
						<el-table-column type="index" label="序号" width="60" align="center" />
						<el-table-column prop="pointName" label="点位名称" align="left" show-overflow-tooltip />
						<el-table-column prop="pointFloorNum" label="楼层" width="100" align="left" />
						<el-table-column prop="pointLocation" label="点位位置" align="left" show-overflow-tooltip />
						<el-table-column label="点位标准" align="left">
							<template #default="scope">
								<div @click="chooseStandrad(false, scope.row)" class="relative-box" @mouseenter="scope.row.hover = true" @mouseleave="scope.row.hover = false">
									<el-input :class="!scope.row.inspectionName || !scope.row.hover ? 'table-input' : ''" v-model="scope.row.inspectionName" :maxlength="50" style="width: 100%" placeholder="请选择" readonly>
										<template v-if="scope.row.inspectionName && scope.row.hover" #append>
											<el-icon class="cursor-pointer" color="#cccccc" @click.stop="clearTableInput(scope.row, scope.$index)"><CircleClose /></el-icon>
										</template>
									</el-input>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>

				<div class="zs-align-center zs-space-top-lg zs-space-bottom-bg" id="sm-drawer-demo-card-01">
					<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
					<div class="zs-title">批量配置</div>
				</div>

				<el-form ref="formRef" label-position="right" label-width="100px" :model="formData.data">
					<el-form-item label="点位标准：">
						<el-input v-model="formData.data.dianweibiaozhun" :maxlength="50" readonly placeholder="请选择" @click="chooseStandrad(true)" />
					</el-form-item>
				</el-form>
			</div>
			<DrawerPointStandardInfo ref="standardRef" v-if="standradShow" :standradTypeList="standradTypeList" :currentPoint="currentPoint" :planId="currentRow.id" @closeInfoPage="closeInfoPage" @confirmInfoPage="confirmInfoPage" :choosePointList="choosePointList" :isBatch="isBatch"></DrawerPointStandardInfo>
		</template>

		<template #footer>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="handleClose(false)">提交</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { planPointBoundListApi, standradBindApi } from '@/api/inspect.js';
	import { ref, reactive, nextTick, watch } from 'vue';
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	import DrawerPointStandardInfo from './drawerPointStandardInfo.vue';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
		standradTypeList: { type: Object },
	});
	let route = useRoute();
	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSizeBig);

	let standradShow = ref(false);
	const tableRef = ref();
	let formData = reactive({ data: { dianweibiaozhun: '' } });
	//是否是批量
	let isBatch = ref(false);
	//查询条件
	let queryParams = reactive({ projectCode: route.query.projectCode, pointName: '' });
	//点位抽屉flag
	let isShowDrawer = ref(props.isShow);
	// 列表 filed
	let tableData = reactive({
		loading: false,
		data: [],
	});

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				queryParams.pointName = '';
				newVal && queryList();
				tableRef.value.clearSelection();
			});
		},
	);

	const emit = defineEmits(['close']);

	// 点位数据源
	const queryList = async () => {
		tableData.loading = true;
		let params = Object.assign(queryParams, { planId: props.currentRow?.id });
		let res = await planPointBoundListApi(params);
		if (res.data.code !== 200) return;
		tableData.data = res.data.data || [];
		tableData.loading = false;
	};

	//打开选择标准弹框
	const standardRef = ref();
	let currentPoint = ref(null);
	const chooseStandrad = (batch, data) => {
		isBatch.value = batch;
		currentPoint.value = batch ? null : data;
		if (batch) {
			if (choosePointList.value.length < 2) {
				ElMessage({ message: '请至少选择两个点位！', type: 'warning' });
				return;
			}
		} else {
			tableRef.value.clearSelection();
			// tableRef.value.toggleRowSelection(data, true);
		}
		standradShow.value = true;
		nextTick(() => {
			standardRef.value.initFn();
		});
	};

	//关闭选择标准弹框
	const closeInfoPage = done => {
		standradShow.value = false;
	};

	//关联 点位和选中的标准 isBatch:多选   isCover: 为true代表选择的点位有绑定过标准
	const confirmInfoPage = async inspectionStandardIdList => {
		let isCover = choosePointList.value.some(item => item.inspectionName !== null);
		if (isBatch.value) {
			if (isCover) {
				ElMessageBox.confirm('选择的点位存在绑定关系，确认覆盖?').then(() => {
					confirmInfoPageFn(inspectionStandardIdList);
				});
			} else {
				confirmInfoPageFn(inspectionStandardIdList);
			}
		} else {
			confirmInfoPageFn(inspectionStandardIdList);
		}
	};

	//关联 点位和选中的标准
	const confirmInfoPageFn = async inspectionStandardIdList => {
		let pointIdList = isBatch.value ? choosePointList.value.map(item => item.pointId) : [currentPoint.value.pointId];
		let res = await standradBindApi({
			pointIdList: pointIdList,
			inspectionStandardIdList: inspectionStandardIdList,
			planId: props.currentRow.id,
		});
		if (res.data.code != 200) return;
		ElMessage({ message: '绑定成功', type: 'success' });
		closeInfoPage();
		queryList();
	};

	//清空table中的input的值
	const clearTableInput = (row, index) => {
		isBatch.value = false;
		currentPoint.value = row;
		if (!row.list || row.list?.length == 0) {
			return;
		}
		confirmInfoPageFn([]);
	};

	//关闭点位抽屉
	const handleClose = done => {
		standradShow.value = false;
		emit('close', { isShow: false });
		done && done();
	};

	//已选点位的集合
	let choosePointList = ref([]);
	const handleSelectionChange = data => {
		choosePointList.value = data;
	};
</script>

<style scoped lang="scss">
	.table-clear-btn {
		top: 50%;
		right: 10px;
		transform: translate(0, -50%);
		z-index: 10;
	}
	::v-deep .el-input-group__append,
	.el-input-group__prepend {
		padding: 0 5px 0 0;
		background: #fff;
	}
	.zs-table-page-main {
		::v-deep .el-input__wrapper {
			border-top: 1px var(--el-input-border-color, var(--el-border-color)) solid;
			border-left: 1px var(--el-input-border-color, var(--el-border-color)) solid;
			border-bottom: 1px var(--el-input-border-color, var(--el-border-color)) solid;
			box-shadow: none;
			border-radius: 2px;
		}
	}
	.table-input {
		::v-deep .el-input__wrapper {
			border-right: 1px var(--el-input-border-color, var(--el-border-color)) solid;
		}
	}
</style>
